<template>
    <el-card class="box-card">
        <div slot="header">
            <span>商品分类</span>
            <el-button style="float: right;" type="primary" size="mini" @click="drawer = !drawer">添加分类</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <!-- 日期 -->
            <el-table-column label="序号" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="分类名称" width="180">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        <el-input v-if="scope.row.editState" v-model="scope.row.cateName"></el-input>
                        <span v-else>{{ scope.row.cateName }}</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="是否启用" width="120">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.state" :active-value="1" :inactive-value="0"
                        :disabled="!scope.row.editState"></el-switch>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" v-if="scope.row.editState" type="success"
                        @click="edit(scope.row)">完成</el-button>
                    <el-button size="mini" v-else @click="scope.row.editState = true">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @current-change="changePage" :current-page="Page" :page-size="pageSize"
            layout="total, prev, pager, next, jumper" :total=total>
        </el-pagination>

        <el-drawer title="添加分类" :visible.sync="drawer" direction="rtl">
            <div class="fl">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="分类名称">
                        <el-input v-model="form.cateName"></el-input>
                    </el-form-item>

                    <el-form-item label="是否启用" width="120">
                        <el-switch v-model="form.state" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button type="primary" @click="addSubmit">立即创建</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </el-card>
</template>

<script>
import { addcate, catelist, editcate, delcate } from '@/api/user.js'
export default {
    data() {
        return {
            tableData: [],
            Page: 1,//显示第几页
            pageSize: 5,//每页显示多少条
            total: 0,//总条数
            drawer: false,
            cateName: '',
            form: {
                cateName: '',
                state: 1,
                id: 0
            },
        }
    },

    created() {
        this.dataList()
    },
    methods: {
        async edit(row) {
            let res = await editcate(row)
            row.editState = false//修改完成吧状态改为假，隐藏修改框
            console.log(res);
        },
        async del(row) {
            let res = await delcate({
                id: row.id
            })
            this.dataList()
        },
        changePage(row) {
            this.Page = row
            this.dataList()
        },
        // 添加分类
        async addSubmit() {
            let res = await addcate(this.form)
            this.dataList()
        },

        async dataList() {
            let flist = await catelist({
                currentPage: this.Page,
                pageSize: this.pageSize
            })
            if (flist.status === 200) {
                this.total = flist.data.total//总页数
                this.tableData = flist.data.data.map(v => {
                    v.editState = false
                    return v
                })
                this.form.id = flist.data.data.id//ID
            }
        },
    },


}
</script>

<style lang="less" scoped>
.fl {
    width: 70%;
}
</style>